<template>
  <div class="person">
    <h1>中国</h1>
    <h2 ref="title2">北京</h2>
    <h3>武汉</h3>
    <button @click="outputH2">点我输出h2这个元素</button>
  </div>
</template>
<script setup lang="ts">
import { ref ,defineExpose} from 'vue';
// 创建一个title2,用于存储ref标记的内容
let title2 = ref();
let a=ref(1);
let b=ref(2);
let c=ref(3);
function outputH2() {
console.log(title2.value);
}
defineExpose({aValue:a,b});
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>